<template>
	<z-paging ref="paging" v-model="list" @query="getData" :loading-more-enabled="false">
		<view class="d-p-l-30 d-p-r-30" v-if="list.length > 0">
			<view class="d-m-t-20 d-flex d-col-top">
				<u-image :src="info.picture" width="210rpx" height="248rpx"></u-image>
				<view class="d-m-l-20 d-flex-1">
					<view class="d-font-30 u-line-1">{{ info.name }}</view>
					<view class="d-flex d-m-t-18">
						<view class="d-tag d-flex" v-if="info.specif">{{ info.specif }}</view>
					</view>
					<!-- <view class="d-font-24 d-be d-m-t-20">{{ info.tip }}</view> -->
					<view class="d-m-t-60 d-font-30 d-red">
						<text class="d-font-24">￥</text>
						<text class="d-bold">{{ info.selling_price }}</text>
					</view>
				</view>
			</view>
			<!-- <view class="d-flex d-m-t-30 d-p-b-30 u-border-bottom">
				<view class="d-flex-1 d-font-28">购买数量</view>
				<view>
					<view slot="input" class="input d-flex d-row-center">1</view>
					<u-number-box v-model="form.number" :disabled="true" :disabledInput="true" :disablePlus="true"
						:disableMinus="true">
						<view slot="minus" class="minus d-flex d-row-center"><u-icon name="minus" size="24rpx"
								color="#000"></u-icon></view>
						<view slot="input" class="input d-flex d-row-center">{{ form.number }}</view>
						<view slot="plus" class="plus d-flex d-row-center"><u-icon name="plus" size="24rpx"
								color="#000"></u-icon></view>
					</u-number-box>
				</view>
			</view> -->
			<!-- <view class="d-flex d-p-t-30 d-p-b-30" v-if="info.cate_id == 1">
				<u-checkbox-group shape="circle" v-model="has_child" active-color="#59A0FF" size="32rpx"><u-checkbox name="ok"></u-checkbox></u-checkbox-group>
				<view class="d-font-28 d-flex-1" @click="setChild">携带1米以下儿童</view>
				<view class="d-font-28 d-m-r-20 d-p-l-80" @click="show.pick = true">{{ form.has_child }}</view>
				<u-icon name="arrow-right" size="24rpx" @click="show.pick = true"></u-icon>
			</view> -->
			<!-- <view class="d-flex d-notice d-p-l-30 d-p-r-30 d-p-t-26 d-p-b-26">
				<u-image src="/static/ss.png" width="65rpx" height="29rpx"></u-image>
				<view class="d-p-l-22 d-font-26">当前游泳馆人数密度：宽松</view>
			</view> -->
			
			<view class="d-p-t-30">
				<image style="width: 687rpx;height: 83rpx;" src="../../static/ererer.png" mode=""></image>
			</view>
			
			<view class="d-m-t-30">
				<!-- <view class="d-font-32 d-main">购买须知</view> -->
				<view class="d-font-28 d-m-t-10"><u-parse :content="info.buy_content"></u-parse></view>
				<!-- <view class="d-font-28 d-bold d-m-t-20">有效期</view>
				<view class="d-66 d-font-26">·2023-03-13</view>

				<view class="d-font-28 d-bold d-m-t-20">使用时段</view>
				<view class="d-66 d-font-26">·购票当日，以场馆开放时间为准</view>

				<view class="d-font-28 d-bold d-m-t-20">使用规则</view>
				<view class="d-66 d-font-26">·无需预约，每张票限一人使用</view> -->
			</view>
		</view>

		<d-agent :show="show.agent" title="用户须知" :content="info.user_content" @confirm="show.agent = false"></d-agent>
		<u-picker :show="show.pick" closeOnClickOverlay :columns="[[1]]" title="儿童数量" @close="show.pick = false"
			@cancel="show.pick = false" @confirm="setChildNumber"></u-picker>
			<!--  -->
		<template slot="bottom" v-if="visable == true" >
			<view class="d-p-l-30 d-p-r-30 d-p-b-20 d-p-t-20" v-if="info.disabled == 0">
				<view class="d-flex">
					<u-checkbox-group size="24rpx" shape="circle" v-model="agent" active-color="#59A0FF">
						<u-checkbox name="ok" label="我已同意和接受" label-size="25rpx" label-color="#999999"></u-checkbox>
					</u-checkbox-group>
					<text class="d-font-24" @click="show.agent = true">《用户须知》</text>
				</view>
				<view class="d-m-t-30 d-flex">
					<view class="d-flex-1 d-font-30">
						<text>总额：</text>
						<text class="d-font-24 d-red">￥</text>
						<text class="d-red"
							v-if="info.selling_price">{{ (info.selling_price * form.number).toFixed(2) }}</text>
					</view>
					<view>
						<u-button type="primary" shape="circle" :custom-style="{
								height: '80rpx',
								width: '240rpx',
								fontSize: '30rpx',
								background: '#59A0FF'
							}" @click="ticketPay">
							立即预约
						</u-button>
					</view>
				</view>
			</view>
		</template>
		<u-popup @touchmove.stop :show="selectAlertShow" @close="closeAmount" closeOnClickOverlay mode="bottom"
			style="position: absolute;z-index: 999;height: 50vh;" :safeAreaInsetTop="false" round="15">
			<view class="store-popup" style="padding: 20rpx 0">
				<view class="title flex-between"
					style="padding: 0px 30rpx;padding-bottom: 20rpx;margin-bottom: 20rpx;border-bottom: 1px solid #cccccc;font-weight: bold;">
					<text>请选择</text>
					<u-icon @click="closeAmount" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
				</view>
				<view class="section">
					<view class="section-1 flex-align">
						<view class="image">
							<image :src="info.picture" width="211rpx" height="248rpx" radius="5"></image>
						</view>
						<view class="detail">
							<view>
								<view class="detail-1">
									{{ info.name }}
								</view>
								<view class="" style="font-size: 24rpx;">
									【16岁以下和65岁以上】需在监护人的陪同下入场
								</view>
								<view class="flex-align " style="margin-top: 10rpx;margin-right: 10rpx">
									<!-- <view v-for="(item, index) in checkedSpec" :key="index" style="margin-right: 10rpx"> -->
									<!-- <u-tag :text="item.name"></u-tag> -->
									<!-- </view> -->
									<view v-if="namelist != ''" class="sav" style="font-size: 26rpx;color: white;border-radius: 4rpx;
									padding: 7rpx 10rpx;color: #fff;background-color: #3c9cff ;margin-right: 10rpx;margin-top: 5rpx;">
										{{namelist}}{{day}}
									</view>
									<view v-if="namelists != ''" class="sav" style="font-size: 26rpx;color: white;
									border-radius: 4rpx;padding: 7rpx 10rpx;color: #fff;background-color: #3c9cff ;margin-right: 10rpx;margin-top: 5rpx;">
										{{namelists}}
									</view>
								</view>
							</view>
							<view class="flex-align" style="margin-top: 8rpx;font-size: 26rpx;">
								<!-- {{info.tip}} -->
								<!-- <view v-for="(item, index) in ticketData.venues_project" :key="index"
									style="margin-right: 10rpx">
									<u-tag :text="item.name" size="mini"></u-tag>
								</view> -->
							</view>
							<view style="display: flex; align-items: center;justify-content: space-between;">
								<view class="price">￥<text>{{ info.selling_price }}</text>
								</view>
								<view class="detail-2">库存:<text style="color: orange">{{elseStock}}</text></view>
							</view>
						</view>
					</view>
					<scroll-view scroll-y="true" style=" height: calc(50vh - 248rpx);">
						<view class="section-2" v-if="data_specs != ''">
							<view class="sub-title">日期</view>
							<view class="tag-list">
								<u-tag v-for="(item2,index2) in data_specs" :key="index2" :text="item2.name + ' ' + item2.day"
									type="warning" :bgColor="
								  data_name.indexOf(item2) > -1
								    ? 'rgba(47, 117, 250, 0.05)'
								    : '#EFEFEF'
								" :borderColor="
								  data_name.indexOf(item2) > -1 ? '#2F75FA' : 'rgba(0,0,0,0)'
								" :color="data_name.indexOf(item2) > -1 ? '#2F75FA' : '#333'" @click="data_specss(item2,index2)" />

							</view>
						</view>

						<view class="section-2" v-if="data_specs_s != ''">
							<view class="sub-title">时间段</view>
							<view class="tag-list">
								<u-tag v-for="(item3, index3) in data_specs_s" :key="index3" :text="item3.name"
									type="warning" :bgColor="
								  checkedSpec.indexOf(item3) > -1
								    ? 'rgba(47, 117, 250, 0.05)'
								    : '#EFEFEF'
								" :borderColor="
								  checkedSpec.indexOf(item3) > -1 ? '#2F75FA' : 'rgba(0,0,0,0)'
								" :color="checkedSpec.indexOf(item3) > -1 ? '#2F75FA' : '#333'" @click="clickSpec(item3,index3)" />

							</view>
						</view>
					</scroll-view>
					<view class="btns" @click="handSubmit" v-if="elseStock > 0">确定</view>
					<view class="btns_s" v-if="elseStock == 0">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showinfo" mode="center" width="630rpx" round="30rpx" height='700rpx' :safeAreaInsetBottom='false'>
			<view class="agent-box d-font-28"
				style="background-image: url('/static/caozuoxuzhi.png');background-size: 100% 100%;height: 730rpx;">
				<view class="" style="margin-top: 150rpx;">
					<image style="width: 580rpx;height: 70rpx;margin-left: 25rpx;" src="../../static/yyy.png" mode=""></image>
					<scroll-view scroll-y class="agent-content d-p-l-30 d-p-r-30">
						<view class="" style="padding: 0 20rpx;">
							<view class="" style="line-height: 44rpx;font-size: 26rpx;">
								<text style="font-weight: 600;">1.</text style="">用户登录需登记身份信息，如需添加家属信
								息,请在个人中心“我的家属”添加并审核,校外
								人员请在登录时申请认证。
							</view>
							<view class="" style="line-height: 44rpx;font-size: 26rpx;margin-top: 10rpx;">
								<text style="font-weight: 600;">2.</text>所有用户需提供有效体检报告,申请认证，未
								通过用户无法进行购票购卡操作。
							</view>
							<view class="" style="line-height: 44rpx;font-size: 26rpx;margin-top: 10rpx;">
								<text style="font-weight: 600;">3.</text>通过认证的用户可进行购票购卡操作,并预约
								对应的游泳日期和时段。
							</view>
							<view class="" style="line-height: 44rpx;font-size: 26rpx;margin-top: 10rpx;">
								<text style="font-weight: 600;">4.</text>用户成功预约游泳后,请在对应的时间段到馆
								进行游泳。
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="d-flex d-row-center d-p-t-20 d-p-b-20">
					<view>
						<u-button type="primary" shape="circle" :custom-style="{
								fontSize: '24rpx',
								background: '#59A0FF',
								width: '220rpx',
								height: '70rpx'
							}" @click="onconfirm">
							提交体检报告
						</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-modal :show="showcon" :title="title" :content='info.close_tip' @confirm="on_confirm"></u-modal>
		<u-modal :show="showdialog" :title="title" :content='info.tip2' @confirm="oncon"></u-modal>
	</z-paging>
</template>

<script>
	import {
		ticketDetail,
		getShopTicket,
		getTicketTimeSku,
		getTicketDateSku,checkState
	} from '@/common/api';
	export default {
		data() {
			return {
				show: {
					agent: false,
					pick: false
				},
				list: [],
				info: {},
				id: '',
				form: {
					has_child: 1,
					number: 1
				},
				has_child: [],
				agent: ['ok'],
				selectAlertShow: false, //选择商品
				data_specs: [],
				data_specs_s: [],
				savlist: [],
				price: '0:00',
				elseStock: 0,
				namedata: '',
				data_name: [],
				checkedSpec: [],
				ticket_id: '',
				nametime: "",
				inventory: '',
				nametimid: '',
				namelists: "",
				namelist: "",
				week_day: '',
				time_start: '',
				sale_end: '',
				sale_start: '',
				venueslength: '',
				visable: true,
				showinfo:false,
				day:'',
				showcon:false,
				title:'提示',
				content:'',
				showdialog:false
			};
		},
		onLoad(e) {
			this.id = e.id;
			this.checkStateon()
		},
		methods: {
			on_confirm(){
				this.showcon = true
				uni.navigateBack()
			},
			oncon(){
				this.showdialog = false
			},
			checkStateon(){
				// checkState({
				// 	member_id:uni.getStorageSync('member_id')
				// }).then(res => {
				// 	if (res.state != 1) {
				// 		this.showinfo = true
				// 	}
				// });
			},
			onconfirm() {
				this.showinfo = false
				uni.$u.route({
					url: '/pages/mine/userinfo'
				});
			},
			TicketDate() {
				console.log(99999)
				getTicketDateSku({
						ticket_id: this.id,
					})
					.then(res => {
						console.log(res, '[[pp]]')
						this.data_specs = res.result.dateList
						this.$refs.paging.complete([res]);
					})
					.catch(err => {
						this.$ref.paging.complete(false);
					});
			},
			TimeSku() {
				getTicketTimeSku({
						ticket_id: this.id,
						sell_date: this.week_day
					})
					.then(res => {
						this.$refs.paging.complete([res]);
						this.data_specs_s = res.result.dateList
					})
					.catch(err => {
						this.$ref.paging.complete(false);
					});
			},


			// 日期点击事件
			data_specss(item2, index2) {
				this.namelist = item2.name
				this.elseStock = 0
				this.data_name = []
				this.namedata = item2.name
				this.week_day = item2.week_day
				this.day = item2.day
				this.ticket_id = item2.ticket_id
				let data_name = []
				this.data_specs.forEach(item => {
					data_name.push(item)
				})
				data_name.some((item, index) => {
					if (item == item2) {
						this.data_name[index] = item2;
						this.$forceUpdate();
					}
				});

				this.data_specs.map((item, index) => {
					item.checked = index === index2 ? true : false
				})

				this.TimeSku()
			},
			// 时间点击事件
			clickSpec(item3, index3) {
				this.namelists = item3.name
				this.elseStock = item3.elseStock
				this.checkedSpec = []
				this.nametime = item3.name
				this.nametimid = item3.id
				let checkedSpec = []
				this.data_specs_s.forEach(item => {
					checkedSpec.push(item)
				})
				checkedSpec.some((item, index) => {
					if (item == item3) {
						this.checkedSpec[index] = item3;
						this.$forceUpdate();
					}
				});
				this.data_specs_s.map((item, index) => {
					item.checked = index === index3 ? true : false
				})
			},


			getData() {
				ticketDetail({
						id: this.id
					})
					.then(res => {
						console.log(res,'[[]]')
						this.$refs.paging.complete([res]);
						this.info = res;
						if (res.show_dialog == 1) {
							this.showcon = true
						} else{
							this.showcon = false
						}
						if (res.disabled == 1) {
							uni.$u.toast(res.disabled_tip);
						} 
						if (res.show_dialog2 == 1) {
							this.showdialog = true
						} else{
							this.showdialog = false
						}
						if (res.disabled == 1) {
							uni.$u.toast(res.disabled_tip);
						} 
					})
					.catch(err => {
						this.$ref.paging.complete(false);
					});
			},
			setChild() {
				if (this.has_child.length) {
					this.has_child = [];
				} else {
					this.has_child = ['ok'];
				}
			},
			closeAmount() {
				this.selectAlertShow = false;
				this.visable = true;
			},
			ticketPay() {
				if (!this.agent.length) {
					uni.$u.toast('请先同意用户须知');
					return;
				}
				checkState({
					member_id:uni.getStorageSync('member_id')
				}).then(res => {
					if (res.state != 1) {
						this.showinfo = true
					} else{
						this.TicketDate()
						this.selectAlertShow = true
						this.visable = false
						
					}
				});
				
			},
			formatDate(date = new Date(), format = 'YYYY-MM-DD') {
				if (!(date instanceof Date)) {
					date = new Date(date);
				}
				const YYYY = date.getFullYear();
				const MM = ('0' + (date.getMonth() + 1)).slice(-2);
				const DD = ('0' + date.getDate()).slice(-2);
				// const hh = ('0' + date.getHours()).slice(-2);
				// const mm = ('0' + date.getMinutes()).slice(-2);
				// const ss = ('0' + date.getSeconds()).slice(-2);
			
				const result = format
					.replace(/YYYY/, YYYY)
					.replace(/MM/, MM)
					.replace(/DD/, DD);
				return result;
			},
			handSubmit(){
				uni.$u.route({
					url: '/pages/home/ticketPay',
					// type: 'redirectTo',
					params: {
						id: this.id,
						number: this.form.number,
						member_type: this.info.member_type || '',
						has_child: this.has_child.length ? this.form.has_child : 0,
						time_id:this.nametimid,
						choose_date:this.namedata,
						nametime:this.nametime,
						day:this.day
					}
				});
				// uni.navigateTo({
				// 	url:'/pages/home/ticketPay?id=' + this.id
				// })
			},
			setChildNumber(e) {
				this.form.has_child = e.value[0];
				this.show.pick = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ff4105;
	}

	.d-bold {
		font-weight: bold;
	}

	.minus,
	.plus {
		width: 38rpx;
		height: 38rpx;
		background: #f3f3f3;
	}

	.input {
		width: 64rpx;
		font-size: 28rpx;
	}

	.d-notice {
		background-color: #f6f6f6;
		margin: 0 -30rpx;
	}

	.d-main {
		color: #59a0ff;
	}

	.d-66 {
		color: #666;
	}

	.section {
		padding: 0 20rpx;

		.btns {
			background: linear-gradient(0deg, #528EFF, #2F75FA);
			border-radius: 20px;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			padding: 26rpx;
			margin: 0px 30rpx;
			margin-top: 120rpx;
			text-align: center;
		}

		.btns_s {
			background: linear-gradient(0deg, #bebebe, #bebebe);
			border-radius: 20px;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			padding: 26rpx 0;
			margin: 0px 30rpx;
			margin-top: 120rpx;
			text-align: center;
		}

		.section-1 {
			height: 248rpx;

			.image {
				width: 211rpx;
				height: 248rpx;
				margin-right: 26rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.detail {
				flex: 1;
				width: 0;
				display: flex;
				height: 100%;
				flex-direction: column;
				justify-content: space-between;

				.detail-1 {
					font-size: 27rpx;
					font-weight: 500;
					color: #333333;

					.flex-align {
						.sav {
							font-size: 22rpx;
							color: white;
							border-radius: 4rpx;
							padding: 5rpx 10rpx;
							color: #fff;
							background-color: #2979ff !important;
							margin-right: 10rpx;
						}
					}
				}

				.detail-2 {
					font-size: 24rpx;
					font-weight: 500;
					color: #888888;
					margin-top: 12rpx;

					text {
						font-size: 32rpx;
					}
				}

				.price {
					font-size: 20rpx;
					font-weight: 500;
					color: #ff0000;

					text {
						font-size: 32rpx;
						font-weight: 700;
					}
				}
			}
		}

		.section-2 {
			margin-top: 50rpx;

			.sub-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 20rpx;
			}

			.tag-list {
				display: flex;
				flex-wrap: wrap;

				/deep/.u-tag {
					margin-left: 30rpx;
					margin-bottom: 30rpx;
				}
			}
		}

		.section-3 {
			font-size: 22rpx;
			font-weight: 500;
			color: #333333;
		}
	}
	.agent-box {
		width: 630rpx;
		// border-radius: 30rpx;
		// background-color: #fff;
	}
	
	.agent-content {
		height: 350rpx;
		box-sizing: border-box;
	}
</style>